<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="3" finish-status="success" process-status="wait" align-center	>
      <el-step title="编辑课程基本信息"></el-step>
      <el-step title="编辑课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>


    <div class="ccInfo">
      <div class="ccInfo-Img">
        <img :src="CoursePublishList.cover" >
      </div>
      <div class="ccInfo-main">
         <h2>{{CoursePublishList.title}}</h2>
         <p>共{{CoursePublishList.lessonNum}}课时</p>
         <p><span>所属分类：{{CoursePublishList.subjectLevelOne}}-{{CoursePublishList.subjectLevelTwo}}</span></p>
         <p>所属讲师：{{CoursePublishList.teacherName}}</p>
         <h3>￥{{CoursePublishList.price}}</h3>
      </div>
    </div>

   <div class="step">
      <el-button style="margin-top: 12px;" @click="lastStep">上一步</el-button>
       <el-button style="margin-top: 12px;" @click="next">上传</el-button>
    </div>




  </div>
</template>

<script>
  import {releaseCourse,getCoursePublishV} from '@/api/course/course.js'
  export default {
    data(){
      return {
          form:{},
          CoursePublishList:{},
      }
    },
    mounted() {
      if(this.$route.params.id){
           this.getAll()
      }

    },
    methods:{
      lastStep(){
        this.$router.push("/course/chapter/"+this.$route.params.id)
      },
      next(){
        releaseCourse(this.$route.params.id).then(res=>{
          this.$notify({
           title: '上传成功',
           message: '这是一条成功的提示消息',
           type: 'success'
          });
          this.$router.push("/course/table")
        })
      },
      getAll(){
        getCoursePublishV(this.$route.params.id).then(res=>{
         this.CoursePublishList = res.data.coursePublish
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.step{
  width:80vw;
  margin:1.875rem auto;
}
.ccInfo{
  width:80vw;
  margin:1.875rem auto;
  display: flex;

  .ccInfo-Img{


    img{
      width: 40vw;
      height: 50vh;
    }
  }
  .ccInfo-main{
    width: 100%;
    height: 50vh;
    background-color: #CCCCCC;
    padding-left:1.25rem ;
    line-height: 30px;
    h2{
      text-align: center;
    }
    p:nth-child(2){

      font-size: 2em;
    }
    h3{
      margin-top: 6.25rem;
      font-size: 1.5em;
      color: red;
    }
  }
}
</style>
